<template>
  <view class="page">
    <CommonNavbar
      title="班级详情"
      bgColor="white"
      showBack="true"
    ></CommonNavbar>
    <view class="padding bg-white">
      <up-search
        placeholder="输入学生芽号"
        v-model="state.searchWord"
        :showAction="false"
        @search="handleSearch"
      ></up-search>
    </view>
    <view
      class="bg-white radius margin-lr margin-tb-sm padding-sm"
      @click="checkClassReport(state.classInfo.classId)"
    >
      <up-text
        size="18"
        :text="state.classInfo.className"
      ></up-text>
      <view class="flex margin-top">
        <text class="text-sm text-lightgray flex-sub">
          班级人数：{{ state.classInfo.params?.studentCount }}人
        </text>
        <text class="text-sm text-lightgray flex-twice text-right">
          班主任：{{ state.classInfo.params?.teacherName }}
        </text>
      </view>
    </view>
    <view class="main bg-white padding-tb">
      <up-text
        size="18"
        text="班级名单"
      ></up-text>
      <!-- 学生列表 -->
      <view
        class="student-grid"
        v-if="state.studentList.length > 0"
      >
        <view
          v-for="(student, index) in state.studentList"
          :key="index"
          class="student-item"
        >
          <image
            :src="student.avatar"
            mode="widthFix"
            class="student-avatar"
          />
          <view class="student-info">
            <view class="flex-sub">
              <up-text
                color="white"
                size="14"
                :text="student.nickname"
              ></up-text>
              <up-text
                color="white"
                size="9"
                :text="student.num"
                margin="6rpx 0 0 0"
              ></up-text>
            </view>
            <view
              class="cus-btn"
              @click="selectStudent('123')"
              >选择</view
            >
          </view>
        </view>
      </view>
      <view
        class="margin-top-xl"
        v-else
      >
        <up-empty
          mode="data"
          text="还没有学生"
          icon="/static/images/icon-empty.png"
        >
        </up-empty>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive } from 'vue';
import { searchByShowIdApi } from '@/api/me';
import { getClassDetailApi, getStudentListApi } from '@/api/classes';
import { onLoad } from '@dcloudio/uni-app';
const state = reactive({
  searchWord: '',
  studentList: [
    {
      name: '夏子琪',
      num: '2120022',
      avatar:
        'https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg'
    },
    {
      name: '夏子琪',
      num: '2120022',
      avatar:
        'https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg'
    },
    {
      name: '夏子琪',
      num: '2120022',
      avatar:
        'https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg'
    }
  ],
  classId: '',
  classInfo: {}
});

onLoad((option) => {
  state.classId = option.id;
  getClassDetail();
});

// 班级详情
const getClassDetail = async () => {
  const result = await getClassDetailApi(state.classId);
  if (result.code === 200) {
    state.classInfo = result.data;
    getStudentList();
  } else {
    uni.$u.toast(result.msg);
    uni.navigateBack({
      delta: 1
    });
  }
};

// 获取学生列表
const getStudentList = async () => {
  const result = await getStudentListApi(state.classInfo.classId);
  if (result.code === 200) {
    state.studentList = result.data;
  } else {
    uni.$u.toast(result.msg);
  }
};
const selectStudent = (id) => {
  uni.switchTab({
    url: `/pages/index/index?id=${id}`
  });
};
const handleSearch = async () => {
  const params = {
    showId: state.searchWord
  };
  const result = await searchByShowIdApi(params);
  if (result.code === 200) {
    console.log('result', result);
  } else {
    uni.showToast({
      title: result.msg,
      icon: 'none'
    });
  }
};
const checkClassReport = () => {
  uni.switchTab({
    url: `/pages/index/index?classId=${state.classInfo.classId}`
  });
};
</script>

<style lang="scss" scoped>
.page {
  background-color: #f0efeb;
}

.student-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  margin-top: 20rpx;
  .student-item {
    position: relative;
    background: #f8f9f3;
    border-radius: 20rpx;
    align-items: center;
    border: solid 1px #8db82e;
    overflow: hidden;
    .student-avatar {
      width: 100%;
      height: 100%;
    }

    .student-info {
      display: flex;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background: #9cb95a;
      justify-content: space-between;
      align-items: center;
      padding: 10rpx 18rpx;
      box-sizing: border-box;

      .cus-btn {
        width: 104rpx !important;
        height: 34rpx !important;
        line-height: 34rpx;
        color: black;
        border-radius: 100rpx;
        text-align: center;
        font-size: 18rpx;
        background: linear-gradient(
          96.96deg,
          #d4e9a2 0%,
          rgba(184, 211, 122, 0.8) 18.41%,
          rgba(210, 233, 158, 0.9) 42.07%,
          rgba(201, 236, 124, 0.9) 67.49%,
          #e9ffb8 85.9%
        );
      }
    }
  }
}

.class-list {
  padding-top: 20rpx;

  .class-item {
    padding: 30rpx 0;
    border-bottom: 1rpx solid #eeeeee;

    .class-info {
      font-size: 28rpx;
      color: #333;

      .class-count {
        color: #999;
        margin-left: 10rpx;
      }
    }
  }
}
</style>
